<template>
  <div class="app">
    <el-container>
      <el-header>
        <div class="report_header" style="display: flex;justify-content: space-between;">
          <div style="display: flex;height:100%;align-items: center;">
            <div class="report_header_left"></div>
            <div class="report_header_date">
              <queryDate @queryDateClick='queryDateClick'></queryDate>
            </div>
            <div class="report_header_query">
              <queryShop @queryShopClick='queryShopClick'></queryShop>
            </div>
            <div class="report_header_query">
              <queryEmployee @queryEmployeeClick='queryEmployeeClick'></queryEmployee>
            </div>
            <div class="report_header_query">
              <el-select v-model="query.paymentPluginId" clearable placeholder="请选择结算方式">
                <el-option label="微信" value="weixinPayPlugin"></el-option>
                <el-option label="支付宝" value="alipayPayPlugin"></el-option>
                <el-option label="现金" value="cashPayPlugin"></el-option>
                <el-option label="转账" value="bankPayPlugin"></el-option>
                <el-option label="电子水票" value="waterTicketPayPlugin"></el-option>
                <el-option label="纸质水票" value="paperPayPlugin"></el-option>
                <el-option label="会员卡" value="cardPayPlugin"></el-option>
                <el-option label="金币" value="pointPayPlugin"></el-option>
                <el-option label="购物券" value="matchPointPayPlugin"></el-option>
                <el-option label="库存" value="balancePayPlugin"></el-option>
              </el-select>
            </div>
          </div>
          <div style="display: flex;">
            <el-button style="margin-left: 10px" size="small" type="primary" @click="loadOrder">查询</el-button>
            <ExportList2Excel ref="exportList2Excel" @handleExport="handleExport" name="导出"/>
          </div>
        </div>
      </el-header>
      <el-main>
        <el-table :span-method="totalLine" :height="curHeight" :data="tableData" border style="width: 100%;"
                  @row-click="clickTr">
          <el-table-column type="index" align="center" label="序号" header-align="center" width="50">
            <template slot-scope="scope">{{ scope.$index == tableData.length - 1 ? '总计' : scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column prop="paymentDate" label="付款日期" header-align="center" :show-overflow-tooltip="true"
                           width="160">
            <template slot-scope="scope">
              <span>{{ scope.row.paymentDate | datetimeFormatter }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="type" label="类型" header-align="center" width="60">
            <template slot-scope="scope">
              <span>{{ scope.row.type | watchStatus}}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="memberName" width="120" header-align="center" label="付款人">
          </el-table-column>
           <el-table-column align="center" prop="shopName" header-align="center" width="160" label="所属门店">
          </el-table-column>
          <el-table-column align="left" prop="memo" width="200" header-align="center" label="备注">
          </el-table-column>
          <el-table-column prop="paymentPluginName" fixed="right" width="100" header-align="center" label="付款方式">
          </el-table-column>
          <el-table-column align="right" prop="amount" label="付款金额" header-align="center" width="80">
          </el-table-column>
          <el-table-column align="right" width="80" header-align="center" prop="quantity" label="付款张数">
          </el-table-column>
          <el-table-column align="left" prop="employeeName" label="收款人" header-align="center" width="120">
          </el-table-column>
          <el-table-column prop="sn" label="付款单号" header-align="center" :show-overflow-tooltip="true" width="200">
          </el-table-column>
          <el-table-column align="right" prop="orderDate" label="业务日期" header-align="center" width="160">
            <template slot-scope="scope">
              <span>{{ scope.row.orderDate | datetimeFormatter }}</span>
            </template>
          </el-table-column>
          <el-table-column align="right" prop="orderSn" width="200" header-align="center" label="订单号">
          </el-table-column>

        </el-table>
      </el-main>
      <el-footer>
        <div class="report_footer_box">
          <pagination style="margin-left: 10px" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                      @pagination="loadOrder"></pagination>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
import Pagination from '@/components/Pagination';
import ExportList2Excel from "@/components/ExportList2Excel";
import {
  dateList,
  summary
} from '@/api/receiveReport'
import utils from '@/utils/utils'
import permission from '@/directive/permission'
//条件组件
import queryDate from '@/components/Query/queryDate'
import queryShop from '@/components/Query/queryShop'
import queryEmployee from "@/components/Query/queryEmployee";
export default {
  name: 'detailed-list',
  data() {
    return {
      printing: 5000,//打印数量设置
      query: {
        shopId: '',
        endDate: '',
        beginDate: '',
        paymentPluginId:'',
        employeeId:''
      },
      tableData: [],
      curHeight: null,
      pageSize: 20,
      total: 0,
      pageNum: 1,
      summaryForm: {
        quantity: 0,
        discount: 0,
        totalCost: 0,
        maoli: 0,
        maolilv: 0,
        totalAmt: 0
      },
      shopname: "",
    }
  },
  directives: {
    elDragDialog
  },
  created() {
    var _this = this
    // _this.summaryClick()
  },
  filters: {
    watchStatus(val) {
      if (val == 0) {
        return '收款'
      } else if (val == 1) {
        return '退款'
      }
    }
  },
  components: {
    Pagination,
    queryDate,
    queryShop,
    ExportList2Excel,
    queryEmployee
  },
  mounted() {
    this.comeIn();
    this.beforeMount();
  },
  methods: {
    clickTr(row, event, column) {
      //console.log(row["id"]) 跟下面效果一样
      console.log(row)//获取各行id的值
      this.clicklook(row)
    },
    clicklook(item) {
      this.$router.push({
        path: '/orderReport/detailslist',
        query: {
          id: item.id,
          beginDate: this.query.beginDate,
          endDate: this.query.endDate,
          shopname: this.shopname,
          paymentPluginId:this.query.paymentPluginId,
        }
      })
    },
    queryDateClick(data) {
      this.query.beginDate = data.beginDate
      this.query.endDate = data.endDate

    },
    queryShopClick(data) {
      this.query.shopId = data.shopId
      this.shopname = data.name
    },
    queryEmployeeClick(data){
      this.query.employeeId = data.employeeId
      console.log(data)
    },
    beforeMount() {
      var _this = this
      window.onresize = () => {
        return (() => {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          _this.curHeight = h - 224 //减去页面上固定高度height
        })();
      };
    },
    comeIn() {
      console.log('222')
      var h = document.documentElement.clientHeight || document.body.clientHeight;
      this.curHeight = h - 224 //减去页面上固定高度height
    },
    //下载模板的函数
    handleExport() {
      let _this = this
      var loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      //要导出函数携带的参数
      //要导出函数携带的参数
      let data = {}
      data.tHeader = [ "付款单号", "付款日期","付款人", "付款方式", "所属门店", "付款金额", '付款张数', '业务日期', "收款人", "订单号", '备注']
      data.filterVal = [ "sn", "paymentDate",  "memberName","paymentPluginName", "shopName", "amount", 'quantity', 'orderDate', "employeeName", "orderSn", 'memo']
      data.filename = "收款明细表";
      var params = new URLSearchParams()
      params.append('pageNum', this.pageNum)
      params.append('pageSize', this.printing)
      params.append('startDate', this.query.beginDate)
      params.append('endDate', this.query.endDate)
      params.append('shopId', this.query.shopId)
      params.append('employeeId',this.query.employeeId)
      params.append('paymentPluginId', this.query.paymentPluginId)
      dateList(params).then(res => {
        data.list = res.data.data
        data.list.forEach(item=>{
          if (!utils.isNull(item.paymentDate)) {
              item.paymentDate = utils.dateFormatter(item.paymentDate)
          }
          if (!utils.isNull(item.orderDate)) {
            item.orderDate = utils.dateFormatter(item.orderDate)
          }
        })
        summary(params).then(response => {
          response.data[0].sn = '合计'
          data.list.push(response.data[0])
          _this.$refs.exportList2Excel.handleDownload(data);
          loading.close();
        })
        if (data.list.length == this.printing) {
          this.pageNum++
          this.handleExport()
        } else {
          return;
        }
      }).catch(error => {
        _this.$refs.exportList2Excel.unlockLoading()
        loading.close();
        console.log('error!!')
      })

      _this.$refs.exportList2Excel.handleDownload(data);
    },
    loadOrder() {
      var _this = this
      console.log(this.query)
      const params = new URLSearchParams()
      params.append('pageNum', this.pageNum)
      params.append('pageSize', this.pageSize)
      params.append('startDate', this.query.beginDate)
      params.append('endDate', this.query.endDate)
      params.append('shopId', this.query.shopId)
      params.append('employeeId',this.query.employeeId)
      params.append('paymentPluginId', this.query.paymentPluginId)
      dateList(params).then(response => {
        _this.tableData = response.data.data
        _this.total = response.data.total
        _this.summaryClick()
      }).catch(error => {
      })


    },
    summaryClick() {
      console.log(this.query)
      var _this = this
      const params = new URLSearchParams()
      params.append('startDate', this.query.beginDate)
      params.append('endDate', this.query.endDate)
      params.append('shopId', this.query.shopId)
      params.append('employeeId',this.query.employeeId)
      params.append('paymentPluginId', this.query.paymentPluginId)
      summary(params).then(response => {
        if (response.data[0] != null && response.data.length > 0) {
          _this.tableData.push(response.data[0])
        }
      }).catch(error => {
      })
    },
    totalLine({
                row,
                column,
                rowIndex,
                columnIndex
              }) {
      var _this = this
      if (rowIndex === _this.tableData.length - 1) {
        if (columnIndex === 0) {
          return {
            rowspan: 1,
            colspan: 5
          };
        } else if (columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4) {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
  }
}
</script>

<style scoped>
.details_Title {
  font-size: 14px;
  color: #409EFF;
}

.justify_right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.report_header {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  background-color: white;
  display: flex;
  align-items: center;
}


.report_header_left {
  width: 5px;
  height: 100%;
  background-color: #409EFF;
}

.report_header_date {
  box-sizing: border-box;
  margin-left: 10px;
  width: 260px;
}

.report_header_query {
  margin-left: 10px;
  width: 130px;
}


.report_footer_box {
  width: 100%;
  border: 1px solid #dfe6ec;
  border-top: none;
  height: 60px;
  display: flex;
  align-items: center;
  background-color: white;
}

/deep/ .el-footer {
  padding: 10px;
  padding-top: 0;
}

.report_footer_box_title {
  margin-left: 10px;
  font-size: 12px;
  font-weight: bold;
}

.elOption {
  background-color: #909399;
  color: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 40px
}


.app {
  background-color: rgba(248, 248, 248, 0.8);
}

/deep/ .el-table--group::after,
.el-table--border::after,
.el-table::before {
  background-color: white;
}

/deep/ .el-table__body tbody .el-table__row:last-child {
  background-color: #F5F7FA;
}

/deep/ .el-main {
  padding: 10px;
  padding-bottom: 0;
}

/deep/ .el-table--enable-row-transition .el-table__body td {
  border-bottom: none;
}

/deep/ .el-table::before {
  height: 0px;
}

/deep/ .el-table--border th {
  background-color: rgba(241, 242, 243, 1);
}

/deep/ .el-header {
  padding: 10px;
}

/deep/ .pagination-container {
  margin-top: 0 !important;
}
</style>
